<template>
  <div>
    <div @click="getDetail(1)" class="create_cha">查看原导文》》》》》》</div>
    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm form_item">
      <el-form-item label="导文标题" prop="title">
        <el-input v-model.trim="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="作者" >
        <span>阿九</span>
      </el-form-item>
      <el-form-item label="上传导文图片">
        <el-upload
          name="file"
          action="/admin/tool/upLoadToOss"
          list-type="picture-card"
          :limit='5'
          :multiple="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog title="预览" :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="做客">
        </el-dialog>
      </el-form-item>
      <el-form-item label="" >
        <span>最多可上传5张图片，必须是jpeg、jpg、png、bmp格式，且大小不超过5M</span>
      </el-form-item>
    
      <el-form-item label="输入投诉文案" prop="comment">
        <el-input type="textarea" placeholder="投诉电话：0855-98989235底部加入一段文字描述（输入则显示，不输入则不显示)" v-model.trim="ruleForm.comment"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
        <el-button @click="getDetail(2)">预览</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      :title="detail.title"
      :visible.sync="dialogtishi"
      width="30%">
      <div v-for="(item,index) in detail.img" :key="index" >
        <img class="detailImg" :src="item" alt=""/>
      </div>
      <div>{{detail.comment}}</div>
      
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      detail: {},   //详情
      dialogImageUrl: '',
      dialogVisible: false,
      dialogtishi: false,
      ruleForm: {
        title: '',
        img: [],
        comment: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入投诉标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        comment: [
          { required: true, message: '请输入投诉文案', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ],
        
      }
    };
  },
  created() {
  },
  methods: {
    getDetail(num) {   //获取上个详情
      let url = '/admin/grade/get_text';
      let data = {};
      if(num == 1) {
         this.$request.post(url,data).then(res => {
          console.log(res)
          if(res.data.code == '0000') {
            let data = res.data.data;
            data.img = JSON.parse(data.img)
            this.detail = data;
            this.dialogtishi = true
          }
        })
      }else {
        if(this.ruleForm.title!=''&&this.ruleForm.comment!=''&&this.ruleForm.img.length>0) {
          this.detail = this.ruleForm;
          this.dialogtishi = true
          
        }else {
          this.$message.error('请填写完整')
        }
      }
     
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.img.length > 0) {
            let url = '/admin/grade/add_text';
            let data = this.ruleForm;
            this.$request.post(url,data).then( res => {
              console.log(res)
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    
    handleAvatarSuccess(res, file) {   //文件上传成功时的钩子
      console.log(res,file)
      this.ruleForm.img.push(res.data[0])
      console.log(this.ruleForm.img)
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {    //上传文件之前的钩子
      let istype = file.type === 'image/jpg'||file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/bmp'
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!istype) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return istype && isLt2M;
    },
    handleRemove(file, fileList) {   //删除文件之前的钩子
      console.log(file, fileList);
      let url = file.response.data[0];
      console.log(url)
      let img = this.ruleForm.img;
      console.log(img.indexOf(url))
      img.splice(img.indexOf(url),1)
      console.log(img)
      this.ruleForm.img = img;
    },
    handlePictureCardPreview(file) {   //点击文件列表中已上传的文件时的钩子
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
}
</script>
<style scope>
  
  .form_item {
    width: 50%;
  }
  .el-textarea__inner {
    height: 100px;
  }
  .create_cha {
    color: #00999B;
    margin: 10px 50px 50px 50px;
  }
  .detailImg {
    width: 100%;
    margin: 5px 0;
  }
</style>


